<template>
  <div class="my-product-card userborder">
    <img
      :src="icon"
      class="userlogo">
    <div class="user_name">{{ title }}</div>
    <div class="user_box">
      <div v-for="(suite,i) in suiteList" :key="i" class="product-line user_width">
        <div v-if="suite" class="user_width user_l">
          <img
            :src="suite.icon"
            class="zu_1">
          <div class="user_goods">{{ suite.name }}</div>
        </div>
        <div v-if="suite" class="user_width user_r">
          <div class="user_time_u">
            到期时间：
          </div>
          <div class="user_time_us">
            {{ suite.enabled?format(suite.expiresAt):'已到期' }}
          </div>
        </div>
      </div>
    </div>
    <router-link tag="div" :to="'/product/list/index?active='+moduleCode" class="user_gobuy">
      <img
        src=""
        alt=""
        class="zhong"> <span
          class="go_username">立即续费</span>
    </router-link>

  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'MyProductCard',
    props: {
      icon: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      moduleCode: {
        type: String,
        default: ''
      },
      suiteList: {
        type: Array,
        default: () => {
          return [
            {
              name: '企业微信裂变功能',
              icon: '',
              expiresAt: 1605063204627
            }
          ]
        }
      }
    },
    methods: {
      format (distanceTime) {
        // const time = new Date().getTime() + distanceTime
        return moment(distanceTime).format('YYYY-MM-DD')
      }
    }
  }
</script>

<style lang="less">
  .my-product-card {
    &.userborder {
      padding: 20px 0;
      min-width: 300px;
      width: 19%;
      box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
      border-radius: 5px;
      text-align: center;
      margin-right: 1%;
    }

    .userlogo {
      width: 35px;
      border-radius: 50%;
      margin-top: 28px;
    }

    .user_name {
      color: #353535;
      font-size: 18px;
      margin-top: 12px;
      padding-bottom: 28px;
      border-bottom: 1px solid #f2f2f2;
    }

    .user_box {
      flex-direction: column;
      padding: 21px 14px;
    }

    .product-line {
      height: 34px;
    }

    .user_box, .user_width {
      display: flex;
    }

    .zu_1, .zu_2, .zu_3 {
      width: 14px;
      height: 14px;
      position: relative;
      left: 0;
      top: 3px;
    }

    .user_goods {
      color: #353535;
      font-size: 12px;
      margin-left: 7px;
    }

    .user_r {
      justify-content: space-between;
      width: 54%;
    }

    .user_width {
      flex-direction: row;
      justify-content: space-between;
      padding: 2px 0;
    }

    .user_time_u {
      color: #353535;
      font-size: 12px;
      width: 70px;
    }

    .user_time_us {
      color: #de1f26;
      font-size: 12px;
      cursor: pointer;
    }

    .user_gobuy {
      background-image: -webkit-gradient(linear, left top, right top, from(#ff7e4d), to(#de1f26));
      background-image: linear-gradient(90deg, #ff7e4d, #de1f26);
      width: 60%;
      margin-left: 20%;
      padding: 8px 0;
      border-radius: 5px;
      cursor: pointer;
    }

    .zhong {
      width: 16px;
    }

    .go_username {
      color: #fff;
      font-size: 16px;
      margin-left: 4px;
    }
  }
</style>
